<template>
    <div class="mine-shopsettle">
        <van-nav-bar :title="voiceItem.filg == 1 ? '添加二维码' : '查看二维码'" left-arrow fixed @click-left="onClickLeft" />

        <van-field v-model="name" name="name" label="二维码名称" placeholder="请输入二维码名称" input-align="right">
        </van-field>
        <!-- @click="startScanning" -->
        <van-field v-model="deviceId" :disabled="voiceItem.filg == 0" name="deviceId" label="二维码" placeholder="请扫码获取二维码"
            input-align="right" @click="startScanning" right-icon="scan" readonly>
            <!-- right-icon="scan" -->
        </van-field>

        <div class="tips">取出二维码后，扫描后即可获取</div>

        <div id="reader" style="width: 100%; height: 500px; display: none;"></div> <!-- 扫码区域 -->

        <van-button @click="onSubmit" style="width: 80%;margin: .3rem auto;" round block type="info"
            color="linear-gradient(to right, #FF5851, #E9011B)" v-if="voiceItem.filg == 1">保存</van-button>
    </div>
</template>

<script>
import { Html5Qrcode } from "html5-qrcode";

export default {
    data() {
        return {
            id: this.$route.query.id,
            name: '',
            ids: '',
            deviceId: '', // 用于存储设备号
            html5QrCode: null, // Html5Qrcode 实例
            isScanning: false, // 记录是否正在扫描
            voiceItem: {},
            show: false
        };
    },
    mounted() {
        this.voiceItem = JSON.parse(localStorage.getItem('voiceItem'))
        // console.log(JSON.parse(localStorage.getItem('voiceItem')));
        if (JSON.parse(localStorage.getItem('voiceItem'))) {
            document.title = this.voiceItem.filg == 1 ? '添加设备' : '编辑设备'
            this.name = JSON.parse(localStorage.getItem('voiceItem')).name
            this.deviceId = JSON.parse(localStorage.getItem('voiceItem')).code || this.$route.query.code
            this.ids = JSON.parse(localStorage.getItem('voiceItem')).id
        }
    },
    methods: {
        onSubmit() {
            if (this.name == '') {
                this.$toast('请输入二维码名称');
                return
            }
            if (this.deviceId == '') {
                this.$toast('请扫描二维码');
                return
            }
            let params = {
                name: this.name,
                code: this.deviceId,
            }
            this.$http.post(`/store/manage/${this.id}/cashier_code_add`, params)
                .then(res => {
                    this.$toast.success('操作成功');
                    // this.$router.back();
                    this.$router.replace('/payCodeList?id='+this.id);
                    localStorage.removeItem('voiceItem')
                })

        },
        onClickLeft() {
            this.$router.back();
            localStorage.removeItem('voiceItem')
        },
        startScanning() {
            if (this.voiceItem.filg == 0) {
                return
            }
            let data = {
                name: this.name,
                deviceId: this.deviceId,
                ids: this.ids,
                filg:this.voiceItem.filg
            }
            localStorage.setItem('voiceItem', JSON.stringify(data))
            this.$router.push({ path: '/scanCode', query: { id: this.$route.query.id } })
        }
    },

};
</script>

<style lang="scss">
.mine-shopsettle {
    min-height: 100vh;
    padding-top: 58px;
    box-sizing: border-box;
    background: #fff;

    .van-nav-bar .van-icon {
        color: #333333;
    }

    .van-nav-bar__arrow {
        font-size: 20px;
    }

    .tips {
        width: 95%;
        margin: 0.3rem auto;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 0.24rem;
        color: #666666;
        text-align: left;
    }
}

.popup_title {
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    font-style: normal;
    padding: 0.72rem 0;
}

.popup_btn_list {
    width: 90%;
    margin: 0 auto;
    padding-bottom: .4rem;
    display: flex;
    justify-content: space-between;

    .popup_btn {
        width: 45%;
    }

}

.msg-title {
    text-align: left;
    padding: 0 0.2rem;
    font-size: 0.24rem;
}
</style>